<template>
  <div>
  	<!--邀请家人-->
		<div class="history-title">邀请家人</div>
  	<el-table :data="invite" border style="width: 100%">
	    <el-table-column align="center" prop="invite_relation" label="邀请关系" width="180">

	    </el-table-column>
	    <el-table-column align="center" prop="invite_relation_time" label="关系建立时间" width="180">
	      <template slot-scope="scope">
	        <span>{{scope.row.invite_relation_time| parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
	      </template>
	    </el-table-column>
	    <el-table-column align="center" prop="mobile" label="关系人手机号">
	    	
	    </el-table-column>
	    <el-table-column align="center" prop="relation" label="家庭关系">
	    	
	    </el-table-column>
	  	<el-table-column align="center" prop="havebuy" label="是否注册">
	  		<template slot-scope="scope">
          <span v-if="scope.row.uid === null">无</span>
          <span v-else>是</span>
        </template>
	  	</el-table-column>
	  	<el-table-column align="center" prop="havebuy" label="是否邀请成功">
	  		
	  	</el-table-column>
	  	<el-table-column align="center" label="操作">
	  		<template slot-scope="scope">
					<span v-if="scope.row.uid === null">—</span>
          <a v-else class="views" @click="showInvitList(scope.row.uid)">查看</a>
        </template>
	  	</el-table-column>
    </el-table>
    <!--<div class="block pagination-container">
	    <el-pagination
	    	background
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="currentPage4"
	      :page-sizes="[5,10,20,30, 50]"
	      :page-size="10"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="400">
	    </el-pagination>
    </div>-->
  <!--购买历史-->
  	<div class="history-title">购买历史</div>
  	<el-table :data="history" border style="width: 100%">
	    <el-table-column align="center" prop="order_num" label="订单编号" width="180">
	    	
	    </el-table-column>
	    <el-table-column align="center" prop="plan_name" label="计划名称" width="180"> 
	    	
	    </el-table-column>
	    <el-table-column align="center" prop="username" label="姓名">
	    	
	    </el-table-column>
	    <el-table-column align="center" prop="create_time" label="下单时间">
	    	<template slot-scope="scope">
	        <span>{{scope.row.create_time| parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
	      </template>
	    </el-table-column>
	  	<el-table-column align="center" prop="status_text" label="订单状态">
	  		
	  	</el-table-column>
	  	<el-table-column align="center" label="订单总额">
	  		<template slot-scope="scope">
          <el-tag type="success">{{scope.row.price}}</el-tag>
        </template>
	  	</el-table-column>
	  	<el-table-column align="center" prop="pay_type" label="支付方式">
	  		
	  	</el-table-column>
	  	<el-table-column align="center" prop="favor_type" label="优惠政策">
	  		
	  	</el-table-column>
	  	<el-table-column align="center" label="操作">
	  		<template slot-scope="scope">
	        <router-link :to="'/order/view/' + scope.row.id">查看</router-link>
	      </template>
	  	</el-table-column>
    </el-table>
		<el-dialog width="90%" :title="'全部订单'" :visible.sync="showDialog" custom-class="invite-dialog">
			<el-table :data="allUserOrder" v-loading="isLoading" border style="width: 100%">
				<el-table-column align="center" prop="order_num" label="订单编号" width="180">
					
				</el-table-column>
				<el-table-column align="center" prop="name" label="计划名称" width="180"> 
					
				</el-table-column>
				<el-table-column align="center" prop="pay_type_text" label="缴费方式">
					
				</el-table-column>
				<el-table-column align="center" prop="favor_type_text" label="优惠政策">

				</el-table-column>
				<el-table-column align="center" label="订单总额">
					<template slot-scope="scope">
						<el-tag type="success">{{scope.row.price}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" label="支付时间">
					<template slot-scope="scope">
						<span>{{scope.row.pay_time| parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="order_status" label="订单状态">
					
				</el-table-column>
				<el-table-column align="center" label="操作">
					<template slot-scope="scope">
						<router-link :to="'/order/view/' + scope.row.id">查看</router-link>
					</template>
				</el-table-column>
			</el-table>

			<div v-show="!isLoading" class="pagination-container">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
					:page-sizes="[5,10,20,30, 50]" :page-size="listQuery['per-page']" layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</el-dialog>
  </div>
</template>
<script>
import { orderDetail, getAllUserOrder } from '@/api/order'

export default {
  data() {
    return {
      param: this.$route.params,
      response: null,
      history: null,
      invite: null,
      total: null,
      showDialog: false,
      allUserOrder: null,
      isLoading: false,
      listQuery: {
        page: 1,
        'per-page': 5
      }
    }
  },
  created() {
    this.getList()
  },
  watch: {
    '$route'(to, from) {
      // 对路由变化作出响应...
      this.param = this.$route.params
      this.getList()
    }
  },
  methods: {
    getList() {
      orderDetail(this.param.id).then(response => {
        this.response = response.data
        this.invite = this.response.invite_info
        this.history = this.response.history_info
      })
    },
    showInvitList(uid) {
      this.isLoading = true
      if (uid !== 0) {
        this.listQuery.uid = uid
      }
      getAllUserOrder(this.listQuery).then(response => {
        this.allUserOrder = response.data.data
        this.total = response.data._meta.totalCount
        this.isLoading = false
      })
      this.showDialog = true
    },
    handleSizeChange(val) {
      this.listQuery['per-page'] = val
      this.showInvitList(0)
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.showInvitList(0)
    }
  }
}
</script>
<style scoped>
  .el-table{
  	margin-top: 20px;
  }
  .el-table div {
  	text-align: center;
  }
  .history-title {
  	margin-top: 40px;
    font-size: 20px;
    color: #109ef0;
    text-indent: 20px;
  }
	.views {
		color: #ed8a94;
	}
	.views:hover {
		text-decoration: underline;
	}
	.cell a {
		color: #ed8a94;
	}
	.cell a:hover {
		text-decoration: underline;
	}
</style>